<template>
	<view class="login-page">
		<form  class="form">
			<view class="form-item">
				<text class="item-label">账号</text>
				<input type="text" v-model="name" placeholder="请输入账号" :maxlength="20" class="item-input" />
			</view>
			<view class="form-item">
				<text class="item-label">密码</text>
				<input type="text" password v-model="password" placeholder="请输入密码" :maxlength="20" class="item-input" />
			</view>
			<button class="login-btn" @click="login">立即登录</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				password:''
			}
		},
		methods:{
			async login(){
				if(this.name.length===0){
					return uni.showToast({
						icon:'none',
						title:'请输入账号'
					})
				}
				if(this.password.length===0){
					return uni.showToast({
						icon:'none',
						title:'请输入密码'
					})
				}
				let data=await this.$api.tempLogin({username:this.name,password:this.password})
				uni.showToast({
					icon:'none',
					title:'登录成功'
				})
				setTimeout(()=>{
					uni.setStorage({key:'token',data:data.AUTHORIZATION})
					uni.setStorage({key:'tokenDeadline',data:9585200398988})
					uni.reLaunch({
						url:'/pages/my/my'
					})
				},1000)
				
			}
		}
	}
</script>

<style lang="less">
.login-page{
	height: 100%;
	background-color: #fff;
	padding: 31rpx 75rpx;
}
.form-item{
	display: flex;
	align-items: center;
	height: 105rpx;
	border-bottom: 1rpx solid #E2E9ED;
}
.item-label{
	font-size: 32rpx;
	margin-right: 60rpx;
	color:#333;
	font-weight: bold;
}
.item-input{
	flex:1;
	height: 100%;
	font-size: 32rpx;
}
.login-btn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 600rpx;
	height: 88rpx;
	margin-top: 60rpx;
	background-color: #E7404A;
	font-size:36rpx;
	color:#fff;
	border-radius: 10rpx;
}
</style>
